<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
     #myCanvas{
	   width:500px;
	   height:500px;
	   border:solid 1px yellow;
	   position:absolute;
	   margin:auto;
       left:0;
	   right:0;
	   top:0;
	   bottom:0;
	 }
  </style>
 </head>
  <body>
      <canvas id="myCanvas"></canvas>
  </body>
 <script>
    function drawBezier(){
	   var c = document.getElementById("myCanvas");
	   var ctx = c.getContext("2d");

	   ctx.beginPath();
	   ctx.moveTo(20,170);
	   ctx.lineTo(130,40);
       ctx.lineTo(180,150);
	   ctx.stroke();

	   ctx.beginPath();
	   ctx.moveTo(20,170);

	   ctx.quadraticCurveTo(130,40,180,150);
	   ctx.stroke();
	}
    window.addEventListener("load",drawBezier,true);
 </script>
</html>
